
<script lang="tsx">
// import { Input, InputNumber } from 'element-ui'
// fade/zoom 等
import 'element-ui/lib/theme-chalk/base.css'
// collapse 展开折叠
import Vue, { VNode } from 'vue'
import DhFormItem from './dhFormItem.vue'
export default Vue.extend({
  name: 'dh-form',
  components: {
    DhFormItem
  },
  props: {
    formParams: {
      type: Object,
      default: () => ({})
    },
    formConfig: {
      type: Array,
      default: () => []
    }
  },
  inheritAttrs: false,
  render (h): VNode {
    const { on, col, ...props } = this.$attrs
    const defaultWidth = `${col ? 100 / Number(col) : 100}%`
    const { $scopedSlots } = this
    return (
      <el-form ref='dhForm' {...{ props: { ...props, model: this.formParams }, on }} >
        {this.formConfig.map(({ htmlType, width, ...item }: any) => (
          <el-collapse-transition key={item.name}>
            { htmlType !== 'slot' && item.vIf !== false
              ? <dh-form-item key={item.name} style={{ width: width || defaultWidth }} vShow={item.vShow !== false} formParams={this.formParams} item={item} htmlType={htmlType} />
              : item.vIf !== false && ($scopedSlots as any)[item.name] && ($scopedSlots as any)[item.name]({
                item
              })
            }
          </el-collapse-transition>
        ))}
      </el-form>
    )
  }
})
</script>
<style lang='scss' scoped>
 .el-form {
  display: flex !important;
  flex-wrap: wrap;
  .el-form-item {
    margin-right: 10px;
    transition: height 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    ::v-deep .el-select {
      width: 100%;
    }
  }
}
</style>
